<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import NewShopAuthService from '../services/NewShopAuthService.js'

const router = useRouter()
const searchKeyword = ref('')
const sortBy = ref('') // 'price-asc', 'price-desc', 'sales-desc'
const products = ref([])
const isLoading = ref(false)
const errorMessage = ref('')

// 模拟产品数据
const productsData = [
  {
    id: 1,
    name: '高级无线耳机',
    price: 899,
    image: 'https://via.placeholder.com/300x300?text=Wireless+Headphones',
    description: '高品质无线耳机，支持主动降噪，续航长达24小时',
    sales: 1256,
    rating: 4.8,
    category: '电子产品'
  },
  {
    id: 2,
    name: '智能手表 Pro',
    price: 1999,
    image: 'https://via.placeholder.com/300x300?text=Smart+Watch+Pro',
    description: '全面健康监测，支持多种运动模式，50米防水',
    sales: 892,
    rating: 4.7,
    category: '电子产品'
  },
  {
    id: 3,
    name: '超薄笔记本电脑',
    price: 6999,
    image: 'https://via.placeholder.com/300x300?text=Thin+Laptop',
    description: '高性能轻薄本，16GB内存，512GB固态硬盘，长续航',
    sales: 458,
    rating: 4.9,
    category: '电子产品'
  },
  {
    id: 4,
    name: '智能扫地机器人',
    price: 2499,
    image: 'https://via.placeholder.com/300x300?text=Robot+Vacuum',
    description: '激光导航，智能避障，自动充电，支持APP控制',
    sales: 763,
    rating: 4.6,
    category: '智能家居'
  },
  {
    id: 5,
    name: '全自动咖啡机',
    price: 3299,
    image: 'https://via.placeholder.com/300x300?text=Coffee+Machine',
    description: '意式浓缩，一键操作，支持多种咖啡制作',
    sales: 312,
    rating: 4.5,
    category: '厨房电器'
  },
  {
    id: 6,
    name: '空气净化器',
    price: 1899,
    image: 'https://via.placeholder.com/300x300?text=Air+Purifier',
    description: 'HEPA过滤，除甲醛，智能控制，静音设计',
    sales: 546,
    rating: 4.7,
    category: '智能家居'
  },
  {
    id: 7,
    name: '便携式投影仪',
    price: 2699,
    image: 'https://via.placeholder.com/300x300?text=Projector',
    description: '1080P高清，自动对焦，智能系统，内置电池',
    sales: 287,
    rating: 4.4,
    category: '电子产品'
  },
  {
    id: 8,
    name: '智能台灯',
    price: 499,
    image: 'https://via.placeholder.com/300x300?text=Smart+Lamp',
    description: '无蓝光护眼，语音控制，自动调光，定时功能',
    sales: 1543,
    rating: 4.6,
    category: '智能家居'
  }
]

// 检查登录状态
onMounted(() => {
  if (!NewShopAuthService.isLoggedIn()) {
    // 如果未登录，跳转到登录页面
    router.push('/new-shop-login')
    return
  }
  
  loadProducts()
})

// 加载商品列表
const loadProducts = () => {
  isLoading.value = true
  errorMessage.value = ''
  
  try {
    // 模拟API调用延迟
    setTimeout(() => {
      products.value = [...productsData]
      isLoading.value = false
    }, 500)
  } catch (error) {
    errorMessage.value = '加载商品列表失败'
    console.error('加载商品列表错误:', error)
    isLoading.value = false
  }
}

// 搜索商品
const searchProducts = () => {
  // 这里可以实现搜索逻辑
  console.log('搜索关键词:', searchKeyword.value)
  // 实际应用中应该调用API进行搜索
}

// 处理排序
const handleSortChange = (value) => {
  sortBy.value = value
  // 实际应用中应该调用API进行排序
}

// 查看商品详情
const viewProductDetail = (productId) => {
  router.push(`/new-shop/product/${productId}`)
}

// 过滤和排序后的商品列表
const filteredAndSortedProducts = computed(() => {
  let result = [...products.value]
  
  // 按关键词过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(product => 
      product.name.toLowerCase().includes(keyword) || 
      product.description.toLowerCase().includes(keyword)
    )
  }
  
  // 排序
  switch (sortBy.value) {
    case 'price-asc':
      result.sort((a, b) => a.price - b.price)
      break
    case 'price-desc':
      result.sort((a, b) => b.price - a.price)
      break
    case 'sales-desc':
      result.sort((a, b) => b.sales - a.sales)
      break
    default:
      // 默认不排序
      break
  }
  
  return result
})
</script>

<template>
  <div class="new-shop-product-list-container">
    <!-- 导航栏 -->
    <nav class="new-shop-nav">
      <div class="nav-logo">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="#2196F3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="9" cy="21" r="1"></circle>
          <circle cx="20" cy="21" r="1"></circle>
          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
        </svg>
        <span>NewShop</span>
      </div>
      
      <div class="nav-search">
        <input 
          type="text" 
          placeholder="搜索商品..." 
          class="search-input" 
          v-model="searchKeyword"
          @keyup.enter="searchProducts"
        />
        <button class="search-button" @click="searchProducts">搜索</button>
      </div>
      
      <div class="nav-actions">
        <button class="nav-button" @click="router.push('/new-shop/cart')">
          <svg viewBox="0 0 24 24" width="20" height="20" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
          </svg>
          <span>购物车</span>
        </button>
      </div>
    </nav>
    
    <!-- 主要内容 -->
    <main class="new-shop-product-list-main">
      <!-- 分类导航 -->
      <div class="category-navigation">
        <div class="category-header">
          <h2>商品分类</h2>
        </div>
        <div class="category-list">
          <button class="category-item active">全部</button>
          <button class="category-item">电子产品</button>
          <button class="category-item">智能家居</button>
          <button class="category-item">厨房电器</button>
          <button class="category-item">运动健身</button>
          <button class="category-item">时尚服饰</button>
        </div>
      </div>
      
      <!-- 筛选和排序区域 -->
      <div class="filter-sort-section">
        <div class="filter-options">
          <span>筛选：</span>
          <div class="filter-dropdown">
            <button class="filter-button">价格区间</button>
            <div class="filter-dropdown-content">
              <button class="filter-option">全部</button>
              <button class="filter-option">¥0 - ¥999</button>
              <button class="filter-option">¥1000 - ¥1999</button>
              <button class="filter-option">¥2000 - ¥2999</button>
              <button class="filter-option">¥3000及以上</button>
            </div>
          </div>
          
          <div class="filter-dropdown">
            <button class="filter-button">评分</button>
            <div class="filter-dropdown-content">
              <button class="filter-option">全部</button>
              <button class="filter-option">4.5分及以上</button>
              <button class="filter-option">4.0分及以上</button>
              <button class="filter-option">3.5分及以上</button>
            </div>
          </div>
        </div>
        
        <div class="sort-options">
          <span>排序：</span>
          <select v-model="sortBy" @change="handleSortChange($event.target.value)" class="sort-select">
            <option value="">默认排序</option>
            <option value="price-asc">价格从低到高</option>
            <option value="price-desc">价格从高到低</option>
            <option value="sales-desc">销量从高到低</option>
          </select>
        </div>
      </div>
      
      <!-- 商品列表 -->
      <div class="products-list-section">
        <div class="section-header">
          <h2>商品列表</h2>
          <p>共 {{ filteredAndSortedProducts.length }} 件商品</p>
        </div>
        
        <div v-if="isLoading" class="loading-state">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>
        
        <div v-else-if="errorMessage" class="error-state">
          <p>{{ errorMessage }}</p>
        </div>
        
        <div v-else-if="filteredAndSortedProducts.length === 0" class="empty-state">
          <p>没有找到符合条件的商品</p>
        </div>
        
        <div v-else class="products-grid">
          <div 
            class="product-card" 
            v-for="product in filteredAndSortedProducts" 
            :key="product.id" 
            @click="viewProductDetail(product.id)"
          >
            <div class="product-image">
              <img :src="product.image" :alt="product.name" />
            </div>
            <div class="product-info">
              <div class="product-category">{{ product.category }}</div>
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-description">{{ product.description }}</p>
              <div class="product-rating">
                <span class="rating-stars">★★★★★</span>
                <span class="rating-score">({{ product.rating }})</span>
              </div>
              <div class="product-stats">
                <span class="sales-count">销量: {{ product.sales }}</span>
              </div>
              <div class="product-price">¥{{ product.price }}</div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="new-shop-footer">
      <div class="footer-bottom">
        <p>© 2024 NewShop. 保留所有权利。</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.new-shop-product-list-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 导航栏样式 */
.new-shop-nav {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #2196F3;
}

.nav-logo svg {
  margin-right: 10px;
}

.nav-search {
  display: flex;
  align-items: center;
  max-width: 500px;
  width: 100%;
  margin: 0 40px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px 0 0 6px;
  font-size: 16px;
}

.search-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 16px;
}

.nav-actions {
  display: flex;
  align-items: center;
}

.nav-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #666;
}

.nav-button svg {
  margin-right: 5px;
}

/* 主要内容样式 */
.new-shop-product-list-main {
  flex: 1;
  padding: 30px;
}

/* 分类导航样式 */
.category-navigation {
  background-color: white;
  border-radius: 12px;
  padding: 20px 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-header h2 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #333;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-item {
  padding: 8px 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.category-item:hover {
  border-color: #2196F3;
  color: #2196F3;
}

.category-item.active {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

/* 筛选和排序区域样式 */
.filter-sort-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 12px;
  padding: 20px 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-options {
  display: flex;
  align-items: center;
  gap: 20px;
}

.filter-options span {
  font-weight: 600;
  color: #333;
}

.filter-dropdown {
  position: relative;
}

.filter-button {
  padding: 8px 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filter-button:hover {
  border-color: #2196F3;
}

.filter-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  display: none;
  z-index: 100;
}

.filter-dropdown:hover .filter-dropdown-content {
  display: block;
}

.filter-option {
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.filter-option:hover {
  background-color: #f5f5f5;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-options span {
  font-weight: 600;
  color: #333;
}

.sort-select {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
}

/* 商品列表区域样式 */
.products-list-section {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.section-header p {
  margin: 0;
  color: #666;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40vh;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh;
  color: #f44336;
  font-size: 18px;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh;
  color: #666;
  font-size: 18px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-category {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-name {
  font-size: 20px;
  margin: 0 0 10px 0;
  color: #333;
  flex: 1;
}

.product-description {
  font-size: 14px;
  color: #666;
  margin: 0 0 15px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-stars {
  color: #FFD700;
  font-size: 14px;
  margin-right: 5px;
}

.rating-score {
  font-size: 14px;
  color: #666;
}

.product-stats {
  margin-bottom: 15px;
}

.sales-count {
  font-size: 14px;
  color: #666;
}

.product-price {
  font-size: 24px;
  font-weight: 700;
  color: #2196F3;
  margin-top: auto;
}

/* 页脚样式 */
.new-shop-footer {
  background-color: #333;
  color: white;
  padding: 30px;
  margin-top: 60px;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>